import React from 'react';
import ReactDOM from 'react-dom';
import {List, InputItem, Picker, DatePicker, Radio, Modal} from 'antd-mobile';

function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    while (el) {
        if (matchesSelector.call(el, selector)) {
        return el;
        }
        el = el.parentElement;
    }
    return null;
}

class RiskNotice extends React.Component {
    constructor(props) {
		super(props);
        this.state = {
            clause: false,
            modal: false,
            checkpay: false,
            bankList: []
        }
    }
    
    componentDidMount() {
        
    }

    onChangeRadio = (bol) => {
        this.setState({clause:bol})
        this.props.callback && this.props.callback({showRiskNotice: bol});
    }

    onClose  = () => {
        this.setState({
            modal: false
        })
    }

    showModal = key => () => {
        this.setState({
            modal: true
        })
    }

    onWrapTouchStart = (e) => {
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
            return;
        }
        const pNode = closest(e.target, '.am-modal-content');
        if (!pNode) {
            e.preventDefault();
        }
    }

    handleCheckpay = (e) => {
        this.setState({checkpay:!this.state.checkpay},()=>{
            if(this.state.checkpay){
                T.fetch({ 
                    url:'/bank/list.json',
                }).then((res)=>{
                    if(res.success){
                        let temp = [];
                        res.value.forEach((item, index)=>{
                            temp.push({
                                label: `${item.cardNo}(${item.bankName})`,
                                value: item.bankInfoId
                            })
                        })
                        this.setState({bankList:temp})
                    }
                })
            }
        })
        this.props.callback && this.props.callback({showBankPay: !this.state.checkpay});
    }

    handleBank = (value) => {
        this.setState({bank: value})
        this.props.callback && this.props.callback({bankCardId: value.toString()});
    }

    render() {
        const {clause, checkpay, modal, bankList, bank} = this.state;
        const Lang = window.LangMessage ||{};
        let msg = Lang.please_select || `請選擇`;
        const {className} = this.props;
        return (
            <div className={className}>
                <div style={{ padding: '15px', display:this.props.goodId == '15'?"block":"none" }}>
                    <Radio className="my-radio" checked={checkpay} onChange={this.handleCheckpay}></Radio>
                    {Lang.open_decline || "開通代扣"}<a className="clause" href="javascript:;" onClick={this.showModal('checkpay')}>{`（${Lang.pay_default_consent || '開通代扣默認同意'}《${Lang.pay_service_agreement || '代扣服務協議'}》）`}</a>
                    <div style={{display:checkpay?"block":"none"}}>
                        <Picker 
                            extra={msg}
                            data={bankList}
                            cols={1}
                            value={bank}
                            onChange={(value)=>this.handleBank(value)}
                            okText={Lang.ok_text || '确认'}
                            dismissText={Lang.cancel || "取消"}
                        >
                            <List.Item arrow="horizontal">{Lang.bankcard_no || "银行卡号"}</List.Item>
                        </Picker>
                    </div>
                </div>
                {
                    this.props.language === 'English'?(
                        <div style={{ padding: '15px' }} className="radioBox">
                            <Radio className="my-radio" checked={clause} onChange={e => this.onChangeRadio(!clause)}></Radio>
                            <span>I have already read and agreed<a className="clause" href="javascript:;" onClick={this.showModal('checkpay')}>Notice of Insurance</a> and <a className="clause" href="javascript:;" onClick={this.showModal('checkpay')}>Clauses of Insurance</a></span>
                        </div>
                    ):(
                        <div style={{ padding: '15px'}} className="radioBox">
                            <Radio  className="my-radio" checked={clause} onChange={e => this.onChangeRadio(!clause)}></Radio>
                            <span>{Lang.has_read || '我已閱讀'}<a className="clause" href="javascript:;" onClick={this.showModal('checkpay')}>{`《${Lang.insure_must_know || "投保須知"}》`}</a> {Lang.web_and || '和'} <a className="clause" href="javascript:;" onClick={this.showModal('checkpay')}>{`《${Lang.policy_items || "保險條款"}》`}</a></span>
                        </div>
                    )
                }
                <Modal
                    visible={modal}
                    transparent
                    maskClosable={false}
                    onClose={this.onClose}
                    title="Title"
                    footer={[{ text: 'Ok', onPress: () => {this.onClose(); } }]}
                    wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                    >
                    <div style={{ height: 100, overflow: 'scroll' }}>
                        scoll content...<br />
                    </div>
                </Modal>
            </div>
        )
    }
}

export default RiskNotice;